<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/common/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/res_phone.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont2.css"/>
</head>
<body>
<div id="web">
    <header class="clearfix">
        <a class="fl" href="register.html"><i class="iconfont icon-youbian1"></i></a>
        <a class="fr" href="../search.html">确定</a>
        <h5>注册</h5>
    </header>
    <section>
        <p>请输入您的手机号码</p>
        <p>艺术盒子绝不会在任何途径泄露您的号码和<br>个人信息</p>
        <form id="demoForm">
        <div class="combo">
            <div class="area_num">+86</div>
            <input type="number" name="phone_num" id="phone_num" placeholder="请输入手机号">
        </div>


            <div class="ver_code"><span><i class="iconfont icon-xinfeng"></i></span><input type="text" name="" id="ver_code" placeholder="手机验证码"/></div>
            <div class="ver_code"><span><i class="iconfont icon-mima"></i></span><input type="password" name="password" id="password" placeholder="密码"/></div>
            <div class="ver_code"><span><i class="iconfont icon-e60213"></i></span><input type="text" name="" id="user_name" placeholder="昵称"/></div>
            <input type="button" name="" id="code_btn" value="收取验证码"/>
        </form>
        <div class="bind_way clearfix">
            <div class="bind_item fl">
                <div>
                    <img src="img/register/qq.png"/>
                </div>
                <p><a href="">QQ登录</a></p>
            </div>
            <div class="bind_item fr">
                <div>
                    <img src="img/register/weibo.png"/>
                </div>
                <p><a href="">微博登录</a></p>
            </div>

            <div class="bind_item">
                <div>
                    <img src="img/register/wechat.png"/>
                </div>
                <p><a href="">微信登录</a></p>
            </div>
        </div>
    </section>
</div>
<script src="js/getFont.js"></script>
<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<script src="vendor/messages_zh.js"></script>
<script>
    var validator1;
    $(document).ready(function () {
        validator1 = $("#demoForm").validate({
            debug: true,
            rules: {
                phone_num: {
                    required: true,
                    minlength: 11,
                    maxlength: 11
                },
                name: {
                    required: true,
                    minlength: 4,
                    maxlength: 32
                },
                password: {
                    required: true,
                    minlength: 4,
                    maxlength: 16
                },
                "confirm-password": {
                    equalTo: "#password"
                }
            },
            messages: {
                phone_num: {
                    required: '请输入手机号码',
                    minlength: '请输入11位手机号码',
                    maxlength: '请输入11位手机号码',
                },
                name: {
                    required: '请输入昵称',
                    minlength: '用户名不能小于4个字符',
                    maxlength: '用户名不能超过32个字符',
                    remote: '用户名不存在'
                },
                password: {
                    required: '请输入密码',
                    minlength: '密码不能小于4个字符',
                    maxlength: '密码不能超过16个字符'
                },
                "confirm-password": {
                    equalTo: "两次输入密码不一致"
                }

            },

            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).fadeOut().fadeIn();
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            submitHandler: function (form) {
                console.log($(form).serialize())
            }
        });

        $("#check").click(function () {
            console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
        });
    });
</script>
</body>
</html>